import GpContainer from "@/components/GpContainer";
import { GpTouchableView } from "@/components/GpTouchableView";
import { useNavigateEventChannel } from "@/hooks/useNavigateEventChannel";
import { navigate } from "@/utils/navigation";
import { SafeArea } from "@taroify/core";
import { CoverView, KeyboardAccessory, Text, Textarea, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useRef } from "react";
import { useImmer } from "use-immer";

export default function Index() {
  const actionRef = useRef<FieldEditState['action']>()
  const [state, setState] = useImmer<FieldEditState>({
    maxContent: 1000,
    content: "",
    filedName: "",
    description: "",
    placeholder: "请输入"
  })
  const { eventChannel } = useNavigateEventChannel()
  useEffect(() => {
    eventChannel && eventChannel.once("getField", ({action, ...s}: FieldEditState) => {
      if (s) setState({...state, ...s})
      actionRef.current = action
    })
  }, [])
  async function handleSave() {
    const value = state.content?.trim()
    if (!value) {
      Taro.showToast({
        title: "请输入" + state.filedName
      })
      return
    }
    if (typeof actionRef.current !== "undefined") {
      await actionRef.current(value)
      Taro.showToast({
        title: "保存成功",
        icon: "success"
      })
    } else if (eventChannel) {
      eventChannel.emit("receiveField", value)
    }
    navigate()
  }
  return (
    <GpContainer className="bg-white h-screen overflow-hidden flex flex-col box-border" safeArea={false}>
      <View className="px-[32px] pt-[16px] box-border flex-1 h-0 relative z-10 overflow-hidden">
        <View className="h-full overflow-y-auto">
          <View>
            <Text className="text-primary text-[48px] font-bold">{state.filedName}</Text>
          </View>
          <Text className="inline-block mt-[28px] text-third text-[28px] leading-[36px]">
            {state.description}
          </Text>
          <Textarea placeholder={state.placeholder} placeholderClass="input-placeholder"
            className="mt-[32px] w-full text-primary text-[32px] leading-[48px]"
            maxlength={state.maxContent}
            value={state.content}
            autoHeight={state.autoHeight}
            onInput={({detail: {value}}) => setState(draft => {draft.content = value})}
          >
            <KeyboardAccessory className="flex flex-row justify-between items-center h-[96px] px-[32px] box-border bg-white">
              <CoverView className="flex flex-row items-center text-third text-[32px]">
                <CoverView className="text-theme">{state.content?.length || 0}</CoverView>
                <CoverView>/{state.maxContent}</CoverView>
              </CoverView>
              <CoverView className="h-[80px] w-[400px] box-border text-center leading-[80px] rounded-[64px] text-white text-[32px] bg-theme" onClick={handleSave}>
                保存
              </CoverView>
            </KeyboardAccessory>
          </Textarea>
        </View>
      </View>
      <View className="flex-none bg-white px-[32px] pb-[32px] relative z-20">
        <Text className="text-third text-[32px] text-right inline-block w-full">
          {state.content?.length || 0}<Text className="text-theme">/{state.maxContent}</Text>
        </Text>
        <GpTouchableView className="h-[80px] flex flex-row justify-center items-center bg-theme rounded-[64px] mt-[40px]" onClick={handleSave}>
          <Text className="text-white text-[32px]">保存</Text>
        </GpTouchableView>
        <SafeArea position="bottom" />
      </View>
    </GpContainer>
  )
}
